<template>
  <div>
    <h2>路由测试</h2>
    <div>
      <!-- 导航 -->
      <!-- to的两种用法 -->
      <!-- 第一种:直接指定路由地址 -->
      <RouterLink to="/home" active-class="selected">首页</RouterLink>
      <!-- 第二种:通过:to指定一个json格式的数据,可以通过路由的path属性或者name属性指定地址 -->
      <RouterLink :to="{ path: '/user' }" active-class="selected">用户模块</RouterLink>
      <RouterLink :to="{ name: 'sp' }" active-class="selected">商品模块</RouterLink>
    </div>
    <hr>
    <!-- 展示区域 -->
    <div class="container">
      <RouterView></RouterView>
    </div>
  </div>
</template>
<script>
import { RouterLink, RouterView } from 'vue-router';

</script>
<style>
.container {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}

.selected{
  background-color: red;
}
</style>